<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">音乐管理</div>

      <div class="operation-container">
        <div>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addMusic">新增</el-button>
        </div>
        <div class="search-container">
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="搜索标签"
            clearable
            @clear="clearSearch"
          />
          <el-button type="primary" :disabled=" search.length === 0" size="small" icon="el-icon-search" @click="getSearchCurrentData">搜索</el-button>
        </div>
      </div>

      <div class="music-content-container">
        <el-row :gutter="20">
          <el-col v-for="music in musics" :key="music.id" class="music" :span="6">
            <el-card class="music-card">
              <div class="music-operation">
                <div class="music-update">
                  <el-tooltip class="item" effect="dark" content="修改音乐" placement="top">
                    <i class="fas fa-ellipsis-h" @click="updateMusic(music)" /></el-tooltip>
                </div> <!--修改-->
                <div class="music-del">
                  <el-tooltip class="item" effect="dark" content="删除音乐" placement="top">
                    <i class="fas fa-times-circle" @click="deleteMusic(music)" /></el-tooltip>
                </div> <!--删除-->
              </div>
              <div class="music-cover">
                <div class="music-cover-mask" />
                <el-image
                  style="height: 300px"
                  :src="music.music_cover"
                  fit="cover"
                />
              </div>
              <div class="music-info">
                <div class="music-desc">
                  <div>{{ music.music_name }}</div>
                  <div class="artist">{{ music.music_artist }}</div>
                </div>
                <div class="music-play">
                  <div>
                    <i
                      :class="{'far fa-play-circle':currentMusicSrc !== music.music_url || currentMusicSrc === '' || currentMusicSrc === music.music_url && musicPaused,
                               'far fa-pause-circle':(currentMusicSrc === music.music_url) && !musicPaused }"
                      class="play-button"
                      @click="playMusic(music)"
                    />
                  </div>
                  <!--                  play-circle-->
                  <!--                  <el-button @click="playMusic(music)">按钮</el-button>-->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="music-paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="pageSizes"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
      <el-dialog
        :title="musicDialog.dialogName"
        :visible.sync="musicDialog.dialogVisible"
        width="30%"
        @close="reductionDialog"
      >
        <div class="music-dialog">
          <div>
            <span>音乐名称</span>
            <el-input v-model="musicDialog.dialogMusic.music_name" clearable />
          </div>
          <div>
            <span>音乐歌手</span>
            <el-input v-model="musicDialog.dialogMusic.music_artist" clearable />
          </div>
          <el-switch
            v-model="musicDialog.musicUrlLinkPerhapsFile"
            active-text="音乐链接"
            inactive-text="上传音乐"
          />
          <div v-if="musicDialog.musicUrlLinkPerhapsFile">
            <span>音乐链接</span>
            <el-input v-model="musicDialog.dialogMusic.music_url" clearable />
          </div>
          <div v-else>
            <span>音乐文件</span>
            <el-upload
              drag
              multiple
              action="null"
              :http-request="musicUpload"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
          <el-switch
            v-model="musicDialog.musicCoverLinkPerhapsFile"
            active-text="封面链接"
            inactive-text="上传封面"
          />
          <div v-if="musicDialog.musicCoverLinkPerhapsFile">
            <span>封面url</span>
            <el-input v-model="musicDialog.dialogMusic.music_cover" clearable />
          </div>
          <div v-else>
            <span>封面文件</span>
            <el-upload
              drag
              multiple
              action="null"
              :http-request="imageUpload"
            >
              <div v-if="musicDialog.dialogType === 'add' && musicDialog.dialogMusic.music_cover.length < 4">
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </div>
              <div v-else>
                <el-image
                  style="width: 100%; height: 100%"
                  :src="musicDialog.dialogMusic.music_cover"
                  fit="cover"
                />
              </div>
            </el-upload>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reductionDialog">取 消</el-button>
          <el-button type="primary" @click="musicDialogBtn">确 定</el-button>
        </span>
      </el-dialog>
      <audio id="audio" ref="audio" style="position: absolute;transform: translatex(-1000%)" controls />
    </el-card>

    <el-dialog
      :visible.sync="deleteDialog.DeletionVisible"
      width="20%"
      center
      @close="cancelDelete"
    >
      <h2 style="text-align: center">确定要删除 {{ deleteDialog.deleteName }}?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelDelete">取 消</el-button>
        <el-button type="danger" @click="exactlyDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import { uploadToken, uploadOSS } from '@/api/user'
import { getMusics, createMusics, updateMusics, deleteMusics } from '@/api/musics'
import { Message } from 'element-ui'
import PagerMixin from '@/components/mixins/PagerMixin'

export default {
  name: 'Music',
  mixins: [PagerMixin],
  data() {
    return {
      musicDialog: {
        dialogVisible: false,
        dialogName: '',
        dialogType: '',
        musicUrlLinkPerhapsFile: true,
        musicCoverLinkPerhapsFile: true,
        dialogMusic: {
          id: '',
          music_name: '',
          music_artist: '',
          music_url: '',
          music_cover: ''
        }
      },
      pageSizes: [8, 16],
      currentMusicSrc: '',
      musicPaused: true,
      musics: [],
      deleteDialog: {
        DeletionVisible: false,
        deleteId: '',
        deleteName: ''
      }
    }
  },
  created() {
    this.pageData.pageSize = this.pageSizes[0]
    this.getCurrentData()
  },
  methods: {
    getCurrentData() {
      const params = { pageNum: this.pageData.pageNum, pageSize: this.pageData.pageSize }
      if (this.pageData.search.length !== 0) {
        params.search = this.pageData.search
      }
      getMusics(params).then(resp => {
        this.getPageConfig(resp)
        this.musics = resp.data.result
      })
    },
    messageNotice(title, message) {
      this.$notify({
        title: title,
        dangerouslyUseHTMLString: true,
        message: '<strong>' + message + '</strong>'
      })
    },
    playMusic(music) {
      const play = this.$refs.audio
      if (music.music_url === this.currentMusicSrc) {
        if (this.musicPaused) {
          this.musicPaused = false
          this.messageNotice('正在播放:', music.music_name)
          play.play()
        } else {
          this.musicPaused = true
          this.messageNotice('停止播放:', music.music_name)
          play.pause()
        }
      } else {
        this.currentMusicSrc = music.music_url
        this.musicPaused = false
        play.src = music.music_url
        this.messageNotice('正在播放:', music.music_name)
        play.play()
      }
    },
    reductionDialog() {
      this.musicDialog.dialogName = ''
      this.musicDialog.dialogType = ''
      this.musicDialog.dialogMusic.id = ''
      this.musicDialog.dialogMusic.music_name = ''
      this.musicDialog.dialogMusic.music_artist = ''
      this.musicDialog.dialogMusic.music_url = ''
      this.musicDialog.dialogMusic.music_cover = ''
      this.musicDialog.dialogVisible = false
    },
    updateMusic(music) {
      this.musicDialog.dialogName = '修改音乐'
      this.musicDialog.dialogType = 'update'
      this.musicDialog.dialogMusic.id = music.id
      this.musicDialog.dialogMusic.music_name = music.music_name
      this.musicDialog.dialogMusic.music_artist = music.music_artist
      this.musicDialog.dialogMusic.music_url = music.music_url
      this.musicDialog.dialogMusic.music_cover = music.music_cover
      this.musicDialog.dialogVisible = true
    },
    addMusic() {
      this.musicDialog.dialogName = '添加音乐'
      this.musicDialog.dialogType = 'add'
      this.musicDialog.dialogMusic.id = ''
      this.musicDialog.dialogMusic.music_name = ''
      this.musicDialog.dialogMusic.music_artist = ''
      this.musicDialog.dialogMusic.music_url = ''
      this.musicDialog.dialogMusic.music_cover = ''
      this.musicDialog.dialogVisible = true
    },
    musicDialogBtn() {
      const this_ = this
      if (this.musicDialog.dialogType === 'add') {
        const params = JSON.parse(JSON.stringify(this.musicDialog.dialogMusic))
        delete params.id
        createMusics(params).then(resp => {
          Message({
            message: '创建成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      } else {
        const params = JSON.parse(JSON.stringify(this.musicDialog.dialogMusic))
        updateMusics(params).then(resp => {
          Message({
            message: '修改成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      }
      this.reductionDialog()
    },
    imageUpload(file) {
      const this_ = this
      uploadToken('image').then(resp => {
        uploadOSS(resp.data.token, file.file).then(resp => {
          Message({
            message: '上传成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this_.musicDialog.dialogMusic.music_cover = resp.config.url.split('?')[0]
        })
      })
    },
    musicUpload(file) {
      const this_ = this
      uploadToken('music').then(resp => {
        uploadOSS(resp.data.token, file.file).then(resp => {
          Message({
            message: '上传成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this_.musicDialog.dialogMusic.music_url = resp.config.url.split('?')[0]
        })
      })
    },

    deleteMusic(music) {
      this.deleteDialog.deleteId = music.id
      this.deleteDialog.deleteName = music.music_name
      this.deleteDialog.DeletionVisible = true
    },
    cancelDelete() {
      this.deleteDialog.deleteId = ''
      this.deleteDialog.deleteName = ''
      this.deleteDialog.DeletionVisible = false
    },
    exactlyDelete() {
      deleteMusics({ id: this.deleteDialog.deleteId }).then(resp => {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.cancelDelete()
        this.getCurrentData()
      })
    }
  }
}
</script>

<style scoped>

</style>

<style lang="less">
  .operation-container {
    display: flex;
    justify-content: space-between;

    .search-container {
      display: flex;

      & div:first-child {
        margin-right: 20px;
      }

    }
  }

  .music-content-container {
    padding-top: 25px;

    .music-card {
      max-height: 400px;
      border-radius: 10px;

      .el-card__body {
        padding: 0;
      }

    }

    .music {
      position: relative;
      margin-bottom: 25px;

      .music-operation {
        position: absolute;
        top: 10px;
        right: 20px;
        z-index: 999;
        display: flex;

        & > div {
          color: #000000;
          margin: 0 5px;
          transition: all .3s;
        }

        & > div:hover {
          transform: scale(1.3);
        }

      }

      .music-cover {
        position: relative;
        overflow: hidden;

        .el-image {
          transition: all 1s;
          transform: scale(1.1);
        }

        &:hover .el-image {
          transform: scale(1.3);
        }

        &:hover .music-cover-mask {
          opacity: 0;
        }

        .music-cover-mask {
          position: absolute;
          background-color: #000000;
          transition: all 1s;
          opacity: 0.4;
          z-index: 1;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;

        }
      }

      .music-info {
        padding: 15px 25px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .music-desc {
          padding: 10px 0;
          max-width: 210px;

          & div:first-child {
            white-space: nowrap; /*文字显示不开,强制一行*/
            overflow: hidden; /*溢出的部分隐藏*/
            text-overflow: ellipsis; /*文字用省略号代替*/
            font-size: 1.1rem;
            font-weight: 700;
            color: #121a2a;
          }

          & div:last-child {
            font-size: 0.9rem;
            margin-top: 5px;
            color: #826858;
          }

        }

        .music-play {
          .play-button {
            font-size: 2.3rem;
            transition: all 1s;
          }

          .play-button:hover {
            transform: scale(1.1);
          }

        }
      }
    }
  }

  .music-paging-container {
    float: right;
    margin-bottom: 25px;
  }

  .music-dialog {
    & > div {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    & > div > span {
      margin-right: 10px;
    }

    & > div > .el-input {
      width: 80%;
    }
  }
</style>
